<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拳皇</title>
    <style></style>
    <script src="./access/Iori.js"></script>
    <style>
        canvas{
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <img 
        id="iori" 
        style="display: none;" 
        src="https://dev-1254214490.cos.ap-nanjing.myqcloud.com/Iori.png" 
        alt=""
    >
    <canvas id="canvas" width="800" height="300" ></canvas>
    <script>
        window.onload = function() {
            var iori = document.getElementById('iori');

            var canvas = document.getElementById('canvas');
            var ctx = canvas.getContext('2d');
            
            var userStatusConf = [
                // 0 静止
                '97_0-',
                // 1 快跑
                '97_100-',
                // 2 后退
                '97_30-',
            ]

            var user = {
                x: 0,
                y: 0,
                index: 0,
                status: userStatusConf[0],
                render() {
                    ctx.clearRect(0,0,canvas.width, canvas.height)
                    let imgs = Sprite.iori[this.status]
                    let currentImg = imgs[Math.floor(this.index)];

                    let maxWidth = imgs.reduce((res, item) => {
                        if (res < item.W) {
                            res = item.W;
                        }
                        return res;
                    }, 0);

                    let x = this.x;
                    let y = this.y + (canvas.height - currentImg.H);

                    // 快跑
                    if (this.status === userStatusConf[1]) {
                        x = this.runCalc(imgs, currentImg, maxWidth)
                    }
                    // 后退
                    if (this.status === userStatusConf[2]) {
                        this.x = (this.x -= 2) < 0 ? 0 : this.x;
                        x = this.x;
                    }

                    ctx.drawImage(
                        iori,
                        currentImg.x,currentImg.y,  // 剪切位置
                        currentImg.W, currentImg.H, // 剪切大小
                        x, y,                       // 画布坐标
                        currentImg.W, currentImg.H, // 画布大小
                    )

                    this.index += 0.25
                    if (this.index > imgs.length - 1) {
                        this.index = 0
                    }
                    requestAnimationFrame(function() {
                        user.render()
                    })
                },
                run() {
                    this.index = 0;
                    this.status = userStatusConf[1];
                },
                runCalc(imgs, imgConf, maxWidth) {
                    let x = this.x;
                    // 快跑
                    if (this.status === userStatusConf[1]) {
                        this.x+= 10;
                        x = this.x + (maxWidth - imgConf.W);
                    }
                    // 不能跑出场外
                    if (x + imgConf.W > canvas.width) {
                        x = canvas.width - imgConf.W;
                    }
                    return x;
                },
                back() {
                    this.index = 0;
                    this.status = userStatusConf[2];
                },
                stop() {
                    this.index = 0;
                    this.status = userStatusConf[0];

                    let imgs = Sprite.iori[this.status]
                    let currentImg = imgs[Math.floor(this.index)];

                    if (this.x + currentImg.W > canvas.width) {
                        this.x = canvas.width - currentImg.W
                    }
                }
            }

            user.render()

            let actionMap = {
                68: function() {
                    user.run()
                },
                65: function() {
                    user.back()
                }
            }

            document.lockMap = {}
            document.addEventListener('keydown', function(e) {
                if (!document.lockMap[e.keyCode]) {
                    document.lockMap[e.keyCode] = true
                    if (actionMap[e.keyCode] instanceof Function) {
                        actionMap[e.keyCode]()
                    }
                }
            })
            document.addEventListener('keyup', function(e) {
                document.lockMap[e.keyCode] = false
                user.stop();
            })
        }
    </script>
</body>
</html>
